<template>
  <a-modal
    v-model:visible="formVisible"
    :title="getTitle"
    @ok="handleModalOK"
    @cancel="handleModalCancel"
    :confirm-loading="confirmLoading"
  >
    <a-form :model="formData" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }">
      <a-form-item label="权限类型">
        <a-radio-group v-model:value="formData.types" button-style="solid">
          <a-radio-button :value="0">目录</a-radio-button>
          <a-radio-button :value="1">菜单</a-radio-button>
          <a-radio-button :value="2">页面按钮</a-radio-button>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="上级菜单" v-bind="validateInfos.parentId">
        <a-tree-select
          v-model:value="formData.parentId"
          showSearch
          treeNodeFilterProp="title"
          :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
          :tree-data="permissionTreeData"
          :field-names="{
            children: 'children',
            label: 'title',
            value: 'id',
          }"
        >
        </a-tree-select>
      </a-form-item>
      <a-form-item v-bind="validateInfos.title" label="菜单名称">
        <a-input v-model:value="formData.title"
      /></a-form-item>

      <a-form-item label="排序" v-bind="validateInfos.sorts">
        <a-input v-model:value="formData.sorts" />
      </a-form-item>
      <a-form-item label="图标" v-if="!isButton">
        <IconPicker v-model:value="formData.icon" />
        <!-- <a-input v-model:value="formData.icon" /> -->
      </a-form-item>
      <a-form-item label="路由地址" v-bind="validateInfos.path" v-if="!isButton">
        <a-input v-model:value="formData.path" />
      </a-form-item>
      <a-form-item label="组件Name" v-if="isMenu">
        <a-input v-model:value="formData.name" />
      </a-form-item>
      <a-form-item label="组件路径" v-if="isMenu">
        <a-input v-model:value="formData.component" />
      </a-form-item>
      <a-form-item label="权限标识" v-if="!isDir">
        <a-input v-model:value="formData.permissionCode" />
      </a-form-item>
      <a-form-item label="状态">
        <a-radio-group v-model:value="formData.status">
          <a-radio :value="1">启用</a-radio>
          <a-radio :value="2">禁用</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="外链" v-if="!isButton">
        <a-radio-group v-model:value="formData.iframe">
          <a-radio :value="1">是</a-radio>
          <a-radio :value="2">否</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="缓存" v-if="isMenu">
        <a-radio-group v-model:value="formData.cache">
          <a-radio :value="1">是</a-radio>
          <a-radio :value="2">否</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="隐藏" v-if="!isButton">
        <a-radio-group v-model:value="formData.hide">
          <a-radio :value="1">是</a-radio>
          <a-radio :value="2">否</a-radio>
        </a-radio-group>
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script lang="ts">
export default {
  name: 'MenuModal',
};
</script>
<script setup lang="ts">
import { ref, computed, onMounted, watch, unref } from 'vue';
import { getPermissionList, addPermission, updatePermission } from '/@/api/sys/system';
import { deepMerge } from '/@/utils/index';
import { Form, message } from 'ant-design-vue';
import { IconPicker } from '/@/components/Icon/index';
const useForm = Form.useForm;

const props = defineProps({
  visible: Boolean,
  data: Object,
});
const emit = defineEmits(['ok', 'update:visible']);
const formVisible = ref(false);

const rules = ref({
  parentId: [{ required: true, trigger: 'change', message: '请选择上级菜单' }],
  title: [{ required: true, trigger: 'change', message: '请输入菜单名' }],
});

const formData = ref({
  id: undefined,
  parentId: undefined,
  title: '', //菜单名称
  types: 0, // 0目录 '1:菜单，2:按钮',
  path: '', //路由地址
  sorts: 1, // 菜单顺序
  name: '', // 组件名称
  component: '', // 组件路径
  permissionCode: '', //权限标识
  icon: '', // 图标
  redirect: '', // 跳转路径
  status: 1,
  iframe: 2, // 是否外链 2不是，1是
  cache: 2, // 是否缓存 2:不是 1是
  hide: 2, // 隐藏菜单
});

const permissionTreeData = ref([]);
const confirmLoading = ref<boolean>(false);

const { resetFields, validate, validateInfos } = useForm(formData, rules);
const getTitle = computed(() => (formData.value.id == undefined ? '新增权限' : '编辑权限'));

const isDir = computed(() => (formData.value.types == 0 ? true : false));
const isMenu = computed(() => (formData.value.types == 1 ? true : false));
const isButton = computed(() => (formData.value.types == 2 ? true : false));

watch(
  () => formVisible.value,
  (val) => {
    emit('update:visible', val);
  },
);

watch(
  () => props.visible,
  (val) => {
    formVisible.value = val;
    if (val) {
      resetFields();
      deepMerge(formData.value, props.data);
    }
  },
);

const fetchData = async () => {
  let reslut = await getPermissionList();
  permissionTreeData.value = [{ id: 0, title: '权限树', children: reslut }];
};

onMounted(() => {
  fetchData();
});
const handleModalCancel = () => {
  formVisible.value = false;
};
const handleModalOK = async () => {
  try {
    confirmLoading.value = true;
    await validate();
    if (formData.value.id) {
      await updatePermission(unref(formData));
    } else {
      await addPermission(unref(formData));
    }
    message.success('保存成功');
    formVisible.value = false;
    //更新数据
    fetchData();
    emit('ok', true);
  } finally {
    confirmLoading.value = false;
  }
};
</script>